<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>肯德基优惠券</title>
  <link href="../lib/bootstrap/css/bootstrap.css" rel="stylesheet">
  <link rel="stylesheet" href="../css/base.css">
  <link rel="stylesheet" href="../css/KFC.css">
  <!--[if lt IE 9]>
      <script src="./lib/html5shiv/html5shiv.min.js"></script>
      <script src="./lib/respond/respond.js"></script>
    <![endif]-->
</head>

<body>
  <div class="mmb_homepage">
    <!-- 头部部分开始 -->
    <div class="header">
      <div class="headerLeft">
        <a href="./coupon.html">
          <span class=" glyphicon glyphicon-menu-left"></span>
        </a>
      </div>
      <div class="title">
        肯德基优惠券
      </div>
      <div class="headerRight">
        <a href="javascript:;">
          <img src="../images/header_app.png" alt="">
        </a>
      </div>
    </div>
    <!-- 头部部分结束 -->
    <!-- title部分开始 -->
    <div class="show">
      --点餐前出示手机中的优惠券，即可享受优惠--
    </div>
    <!-- title部分结束 -->
    <!-- 主体部分开始 -->
    <div class="content">
      <ul class="shopFood">

      </ul>
    </div>
    <!-- 主体部分结束 -->
  </div>

  <!-- 隐藏图片轮播图页面开始-->
  <div class="modal fade foodShow" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-body">
          <div id="carousel-example-generic" class="carousel slide">
            <div class="carousel-inner shopImg" role="listbox">
             
            </div>
          </div>
          <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
        </div>

      </div>
    </div>
  </div>
  <!-- 隐藏图片轮播图页面结束 -->




</body>

</html>
<script src="../lib/jquery/jquery.js"></script>
<script src="../lib/bootstrap/js/bootstrap.js"></script>
<script src="../js/template-web.js"></script>
<script src="../js/zepto.min.js"></script>
<script src="../js/touch.js"></script>
<!-- 优惠商品列表模块 -->
<script type="text/template" id="foodList">
  <% for(i=0;i<result.length;i++){ %>
    <li class="btn btn-lg" data-toggle="modal" data-target="#myModal" data-id="<%=i%>">
      <a href="javascript:;">
        <div class="foodImg">
          <%=# result[i].couponProductImg%>
        </div>
        <div class="ico">
          <div class="title">
            <h3>
              <%=result[i].couponProductName%>
            </h3>
            <p>
              <%=result[i].couponProductPrice%>
            </p>
          </div>
          <div class="time">
            <%=result[i].couponProductTime%>
          </div>
        </div>
      </a>
    </li>
    <% }%>

</script>
<script type="text/template" id="showList">
  <%for(i=0;i<result.length;i++){ %>
    <div data-id="<%=i%>" class="item <%=i==0?'active':''%>">
      <%=# result[i].couponProductImg%>
    </div>
    <% }%>
</script>
<script>
  $(function () {
    var resId;
    var id = window.location.search;
    if (id.indexOf("?") != -1) {
      resId = id.substr(id.indexOf("=") + 1);
    }
    console.log(resId);
    // var id =1;
    $.ajax({
      type: "get",
      async: false,//是否异步请求
      url: 'http://193.112.55.79:9090/api/getcouponproduct',
      data: { 'couponid': resId },    
      
      dateType: 'json',
      success: function (result) {
        // console.log(result);
        var html = template('foodList', result);
        // console.log(item)  ;            
        $(".shopFood").html(html);
        var foodHtml = template('showList', result);
        $(".carousel-inner").html(foodHtml);

      }
    })
    $(".shopFood").on("tap","li",function (e) {
      var li =$(e.target).parents("li");
      // console.log(li)
      var imgId=li.attr("data-id");
      // console.log(imgId)
      $(".shopImg").children("").removeClass("active");
      $(".shopImg").children("[data-id="+imgId+"]").addClass("active")
    })
  })
</script>